<template>
  <div class="container">
    <div class="step">
      <div class="circle"></div>
      <div class="line"></div>
    </div>
    <div class="border border-style-solid border-gray-100 shadow-lg">
      <sequence title="必填信息">
        <el-form class="p-2" :model="form" label-width="auto" style="max-width: 300px">
          <el-form-item label="设备名称">
            <el-input v-model="lable" />
          </el-form-item>
        </el-form>
      </sequence>
    </div>
  </div>
  <div class="container">
    <div class="step">
      <div class="circle"></div>
      <div class="line"></div>
    </div>
    <div class="content w-full">
      <sequence v-for="optionItem in optionList" @checkTime="callback" :title="optionItem.title" :name="optionItem.name">
      <!-- <el-form class="p-2" :model="form" label-width="auto" style="max-width: 300px">
          <el-form-item label="危险源">
            <el-input v-model="form.danger" />
          </el-form-item>
        </el-form> -->
    </sequence>
    </div>

    <!-- <div class="border border-style-solid border-gray-100 shadow-lg">
    </div> -->
  </div>
  <div class="flex aligin-center justify-center mt-2">
    <el-button type="primary" @click="onSubmit">新增选填项目</el-button>
    <!-- <el-button type="primary" :loading-icon="Refresh" :loading="loading" @click="onSubmit">loading</el-button>
    <el-button type="primary" @click="toggle">toggle</el-button> -->

  </div>
  <el-dialog v-model="optionVisible" title="添加选填项目" width="500">
    <el-form :model="optionForm">
      <el-form-item label="可选项目" label-width="120">
        <el-select v-model="optionForm.selectedOption" placeholder="请选择新增项目">
          <el-option v-for="item in optionForm.options" :key="item.value" :disabled="item.disabled" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="optionVisible = false">Cancel</el-button>
        <el-button type="primary" @click="addOption">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import sequence from './sequence.vue'
// import { ref } from "vue"
import useLoading from '@/hooks/loading'
import {Refresh} from '@element-plus/icons-vue'
const {loading,setLoading,toggle} = useLoading()

const lable = defineModel('lable')
const loglabel = ()=>{
  console.log(lable.value + '----');
}
const form = reactive({
  name: '',
  danger:''
})
const optionForm = reactive<{
  options: {label:string,value:string,disabled:boolean}[],
  selectedOption: string
}
>({
  options: [{ label: "危险源", value: '1',disabled:false }, { label: "需用工器具", value: '2',disabled:false },
  { label: "需用材料", value: '3',disabled:false  }, { label: "需用人数", value: '4',disabled:false  }, { label: "工序步骤", value: '5',disabled:false  }],
  selectedOption: ''
}
  // label: string,
  // value: number,
)
const optionList = ref<{
  title: string,
  name: string,
}[]>([])
const optionVisible = ref(false)

//新增可选项目
const addOption = () => {
  let option = optionForm.options.find(s => s.value == optionForm.selectedOption)
  optionList.value.push({ title: option?.label ?? "", name:option?.label ?? "" })
  option!.disabled = true
  optionVisible.value = false
}
const onSubmit = () => {
  // optionList.value.push({ title: "2", name: "3" })
  optionVisible.value = true
}
const callback = (val)=>{
  // console.log(val);
  // console.log('111');
  
}

defineExpose({
  loglabel
})
</script>

<style lang="less" scoped>
@import url("@/styles/index.less");

.container {
  width: 100%;
  display: flex;
  flex-direction: row;
  min-height: 100px;

  .step {
    width: 20px;
    height: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;

    .circle {
      width: 15px;
      height: 15px;
      border-radius: 15px;
      background-color: @primary-color;
    }

    .line {
      width: 2px;
      height: 30px;
      background-color: @primary-color;
    }
  }

  .border {
    flex: 1;
    margin: 4px;
    min-height: 120px;
    display: flex;
    flex-direction: column;

    .header {
      height: 30px;
      font-size: 1.2rem;
      position: relative;
      padding-left: 10px;

      &::before {
        content: "";
        display: block;
        width: 4px;
        height: 4px;
        background-color: @primary-color;
        position: absolute;
        left: 0;
        top: 14px;
        border-radius: 50%;
      }
    }

    .content {
      height: 100%;
    }
  }
}
</style>
